<template>
	<view class="gt-admin-list-top" v-if="template.nav">
		<!-- 左侧 -->
		<view class="gt-admin-list-top-left">
			<!-- 返回 -->
			<view class="gt-admin-list-top-icon" @click="$skip.goBack()">
				<uni-icons type="left" size="18"></uni-icons>
			</view>
			<!-- 刷新 -->
			<view class="gt-admin-list-top-icon" @click="refresh">
				<uni-icons type="refreshempty" size="18"></uni-icons>
			</view>
			<!-- 导航 -->
			<view class="gt-admin-list-top-nav">
				<view v-for="(item,index) in template.nav" :key="index">
					<text v-if="item.url" @click="$skip.to(item.url)"
						class="gt-admin-list-top-nav-link">{{item.label}}</text>
					<text v-else class="gt-admin-list-top-nav-text">{{item.label}}</text>
					<text v-if="index +1 != template.nav.length " class="gt-admin-list-top-nav-off"> /
					</text>
				</view>
			</view>
		</view>
		<!-- 右侧 -->
		<!-- <view class="gt-admin-list-top-right">
			<view v-for="(item,index) in template.buttonGroup.items" :key="index"
				:class="template.buttonGroup.class || ''" :style="template.buttonGroup.style || ''">
				<view v-if="item.type == 'popup'" :class="item.class || ''" :style="item.style"
					@click="clickBack(item)">{{item.label}}</view>
				<view
					v-else-if="item.type == 'batch' && template.batchSelectIndexList  && template.batchSelectIndexList.length > 0 "
					:class="item.class || ''" :style="item.style || ''" @click="clickBack(item)">{{item.label}}
				</view>
				<view v-else class="btn btn-disabled  mr-15" :class="item.class || ''">{{item.label}}</view>
			</view>
		</view> -->
	</view>
	
</template>

<script>
	export default {
		name: "gt-admin-nav",
		model: {
			prop: 'template',
			event: 'change'
		},
		props: {
			template: {
				type: Object,
				default: () => {
					return {};
				}
			}
		},
		data() {
			return {}
		},
		methods: {
			refresh() {
				let pages = getCurrentPages()
				let url = pages[pages.length - 1].route.substring(5)
				this.$skip.redirect(url)
			},
			callBack(){
				this.$emit('callBack')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.gt-admin-nav {
		line-height: 30px;
		font-size: 15px;
		display: flex;
		flex-flow: row wrap;
		// padding-bottom: 10px;
		// border-bottom: 1px solid #eeeeee;
	}

	.gt-admin-nav-btn {
		display: inline-block;
		white-space: nowrap;
		text-align: center;
		cursor: pointer;
		box-sizing: border-box;
		background-color: #fff;
		border: 1px solid #dcdfe6;
		color: #606266;
		font-size: 13px;
		height: 30px;
		line-height: 30px;
		border-radius: 3px;
		padding:0 5px;
		margin-right: 12px;
	}
	.gt-admin-nav-text {
		margin-right: 5px;
		color: #c0c4cc;
		line-height: 30px;
	}
	.gt-admin-nav-link{
		margin-right: 5px;
		color: #606266;
		cursor: pointer;
		line-height: 30px;
		
	}
	.gt-admin-nav-link:hover{
		font-weight: 700;
	}

	.gt-admin-nav-auto {
		flex-grow: 1;
	}

	.icon-refresh {
		font-size: 18px;
	}

	.icon-refresh:hover {
		color: #409EFF;
	}
</style>
